<template>
  <div class="v-storePassengerFlow">
    <Card :bordered="true">
        <p slot="title">日均客流</p>
        <div slot="extra">
            <Dropdown trigger="custom" :visible="visible" class="v-dropdown" @on-clickoutside="handleClose" style="min-width: 240px;" placement="top-end">
              <span @click="handleOpen">
                  门店筛选
                  <Icon type="arrow-down-b"></Icon>
              </span>
              <DropdownMenu slot="list">
                  <CheckboxGroup v-model="areaNameCheck">
                      <Checkbox v-for="(item, index) in searchAreas" :key="index" :label="item.areaName"></Checkbox>
                  </CheckboxGroup>
                  <div style="text-align: right; margin:10px;">
                      <Button type="primary" @click="handleSubmit">确定</Button>
                  </div>
              </DropdownMenu>
            </Dropdown>
        </div>
        <div id="chartStorePassengerFlow"></div>
    </Card>
  </div>
</template>

<script>
import { mapState } from 'vuex'
var echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/line');
require('echarts/lib/chart/bar');

// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require('echarts/lib/component/legend');
export default {
  name: "v-storePassengerFlow",
  props: {
  },
  data () {
    return {
      dayReport: {},
      searchAreas: [],
      areaName: '',
      areaCode: '',
      visible: false,
      areaNameCheck: [],
      myChart: null
    }
  },
  created () {
    this.SearchAreas()
  },
  computed: {
    ...mapState({
      sideBarWidth: state => state.sideBarWidth,
      getAjaxParams: state => state.timeParams
    })
  },
  watch: {
    getAjaxParams(val) {
      if (this.areaCode !== '') {
        this.DayReport(Object.assign({}, val, {areaCodes: this.areaCode}))
        this.$store.dispatch('SetDownLink', Object.assign({}, val, {areaCodes: this.areaCode}))
      }
    },
    sideBarWidth (val) {
      setTimeout(() => {
        this.myChart.resize()
      }, 200)
    }
  },
  methods: {
    DayReport (params) {
      this.$store.dispatch('SpinShow', true)
      this.$store.dispatch('DayReport', this.$qs(params)).then((res) => {
        if (res.success === '1') {
          this.$store.dispatch('SpinShow', false)
          let xAxis = []
          let series = []
          this.dayReport = res.data.sort((a, b) => {
            return Number(a.areaCode.split('-')[2]) - Number(b.areaCode.split('-')[2])
          })
          for (let i in this.dayReport) {
            xAxis.push(this.dayReport[i].areaName)
            series.push(this.dayReport[i].enters)
          }
          this.$nextTick(() => {
            this.drawChartLine('chartStorePassengerFlow', xAxis, series)
          })
        }
      })
    },
    drawChartLine (id, xAxis, series) {
      this.myChart = echarts.init(document.getElementById(id))
      this.myChart.setOption({
        title: {
        },
        grid: {
          left: '60px',
          // top: '10px',
          right: '20px',
          bottom: '86px'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: [
          {
            type : 'category',
            boundaryGap : true,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#999'
              }
            },
            data : xAxis
          }
        ],
        yAxis: [
          {
            type : 'value',
            splitLine: {
              lineStyle: {
                color: '#f0f0f0'
              }
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#999'
              }
            }
          }
        ],
        series: [
          {
            name:'',
            type:'bar',
            barWidth: 20,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {offset: 0, color: '#50bcf9'},
                    {offset: 1, color: '#3d8de1'}
                  ]
                )
              }
            },
            label: {
              normal: {
                show: true,
                position: 'top',
                color: '#333'
              }
            },
            smooth: true,
            data: series
          }
        ]
      }, true)
      setTimeout(() => {
        window.onresize = this.myChart.resize
      }, 200)
    },
    SearchAreas () {
      this.$store.dispatch('SearchAreas').then((res) => {
        if (res.success === '1') {
          this.searchAreas = res.data
          let _areaNameCheck = []
          let _areaCode = []
          this.searchAreas.map((item) => {
            _areaNameCheck.push(item.areaName)
            _areaCode.push(item.areaCode)
          })
          this.areaNameCheck = _areaNameCheck
          this.areaCode = _areaCode.join(',')
          this.areaName = this.areaNameCheck.join(',')
          this.DayReport(Object.assign({}, this.getAjaxParams, {areaCodes: this.areaCode}))
          this.$store.dispatch('SetDownLink', Object.assign({}, this.getAjaxParams, {areaCodes: this.areaCode}))
        }
      })
    },
    handleOpen () {
      this.visible = true
    },
    handleClose () {
      this.visible = false
    },
    handleSubmit () {
      let _areaCode = []
      this.areaNameCheck.map((item) => {
        this.searchAreas.map((subItem) => {
          if (item === subItem.areaName) {
            _areaCode.push(subItem.areaCode)
          }
        })
      })
      this.areaName = this.areaNameCheck.join(',')
      this.areaCode = _areaCode.join(',')
      this.DayReport(Object.assign({}, this.getAjaxParams, {areaCodes: this.areaCode}))
      this.$store.dispatch('SetDownLink', Object.assign({}, this.getAjaxParams, {areaCodes: this.areaCode}))
      this.visible = false
    }
  }
};
</script>

<style lang="less">
.v-storePassengerFlow {
  .v-dropdown {
    text-align: right
  }
  .ivu-dropdown-menu {
    width: 240px;
    padding: 10px 15px;
  }
  .ivu-checkbox-group {
    text-align: left;
  }
  .ivu-card-head p, .ivu-card-head-inner {
      height: 32px;
      line-height: 32px;
      font-size: 24px;
  }
  .ivu-card-head {
      padding: 30px 20px;
      border-bottom: none;
  }
  #chartStorePassengerFlow {
    width: 100%;
    height: 520px;
  }
}
</style>
